Skip to content

fix(vue-router): tab button works on a deep-loaded tab child#31144

Merged
ShaneK merged 2 commits into
major-9.0from
FW-6452
May 15, 2026
Merged

fix(vue-router): tab button works on a deep-loaded tab child#31144
ShaneK merged 2 commits into
major-9.0from
FW-6452

Conversation

@ShaneK
Copy link
Copy Markdown
Member

@ShaneK ShaneK commented May 13, 2026

Issue number: resolves #29705


What is the current behavior?

In a Vue tabs app, clicking the active tab button after landing directly on a tab child (browser refresh on /tabs/tab1/child, or browser back from an external window.location.href) is a silent no-op. IonTabBar.checkActiveTab only records the active tab's currentHref when there's a prevActiveTab, so the initial deep load leaves currentHref matching originalHref and the originalHref !== currentHref guard in IonTabButton.onClick skips resetTab. Even past that guard, resetTab issues router.go(routeInfo.position - currentHistoryPosition), which resolves to router.go(0) when the tab's only history entry is the current page.

What is the new behavior?

IonTabBar.checkActiveTab now records currentHref on initial setup so the tab state reflects the deep-loaded URL. resetTab takes the tab's originalHref and, when the first history entry for the tab is the current entry, falls back to handleNavigate(originalHref, "pop", "back", undefined, tab). The pop action routes through router.replace, so the deep-loaded child entry is replaced rather than stacked on top and no stale child entry stays in browser history.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Manual test: /vue/tabs/tab1/childone. Load that URL directly, click the Tab 1 button, you should land on /vue/tabs/tab1

@ShaneK ShaneK requested a review from a team as a code owner May 13, 2026 20:13
@ShaneK ShaneK requested a review from BenOsodrac May 13, 2026 20:13
@vercel
Copy link
Copy Markdown

vercel Bot commented May 13, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment May 13, 2026 8:22pm

Request Review

@github-actions github-actions Bot added the package: vue @ionic/vue package label May 13, 2026
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ShaneK ShaneK merged commit 9cd57dc into major-9.0 May 15, 2026
50 checks passed
@ShaneK ShaneK deleted the FW-6452 branch May 15, 2026 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants